<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>贪吃蛇</p>
    </header>

    <div class="content">
      <canvas ref="gameCanvas" width="500" height="500" class="game-canvas"></canvas> <!-- 增大画布大小 -->
      <div>
        <button @click="startGame" class="start-button">开始游戏</button>
        <p class="score">分数: {{ score }}</p>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <AppFooter></AppFooter>
  </div>
</template>

<script>
import AppFooter from '../components/AppFooter.vue';

export default {
  components: {
    AppFooter
  },
  data() {
    return {
      canvas: null,
      ctx: null,
      snake: [{ x: 160, y: 160 }],
      direction: 'right',
      food: { x: 200, y: 200 },
      gridSize: 20, // 保持网格大小不变
      score: 0,
      intervalId: null,
    };
  },
  mounted() {
    this.canvas = this.$refs.gameCanvas;
    this.ctx = this.canvas.getContext('2d');
    document.addEventListener('keydown', this.changeDirection);
  },
  methods: {
    startGame() {
      if (this.intervalId) {
        clearInterval(this.intervalId); // 重置游戏
      }
      this.resetGame();
      this.intervalId = setInterval(this.updateGame, 100);
    },
    resetGame() {
      this.snake = [{ x: 160, y: 160 }];
      this.direction = 'right';
      this.food = this.randomPosition();
      this.score = 0;
    },
    updateGame() {
      this.moveSnake();
      if (this.checkCollision()) {
        alert('游戏结束！');
        clearInterval(this.intervalId);
        return;
      }
      if (this.eatFood()) {
        this.snake.push({}); // 增加蛇的长度
        this.score += 10;
        this.food = this.randomPosition();
      }
      this.drawGame();
    },
    drawGame() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.fillStyle = 'red';
      this.ctx.fillRect(this.food.x, this.food.y, this.gridSize, this.gridSize);
      this.ctx.fillStyle = 'green';
      this.snake.forEach(part => {
        this.ctx.fillRect(part.x, part.y, this.gridSize, this.gridSize);
      });
    },
    moveSnake() {
      const head = { ...this.snake[0] };
      if (this.direction === 'right') head.x += this.gridSize;
      if (this.direction === 'left') head.x -= this.gridSize;
      if (this.direction === 'up') head.y -= this.gridSize;
      if (this.direction === 'down') head.y += this.gridSize;
      this.snake.unshift(head);
      this.snake.pop();
    },
    changeDirection(event) {
      const keyPressed = event.key;
      if (keyPressed === 'ArrowUp' && this.direction !== 'down') {
        this.direction = 'up';
      } else if (keyPressed === 'ArrowDown' && this.direction !== 'up') {
        this.direction = 'down';
      } else if (keyPressed === 'ArrowLeft' && this.direction !== 'right') {
        this.direction = 'left';
      } else if (keyPressed === 'ArrowRight' && this.direction !== 'left') {
        this.direction = 'right';
      }
    },
    eatFood() {
      const head = this.snake[0];
      return head.x === this.food.x && head.y === this.food.y;
    },
    checkCollision() {
      const head = this.snake[0];
      if (head.x < 0 || head.x >= this.canvas.width || head.y < 0 || head.y >= this.canvas.height) {
        return true;
      }
      for (let i = 1; i < this.snake.length; i++) {
        if (head.x === this.snake[i].x && head.y === this.snake[i].y) {
          return true;
        }
      }
      return false;
    },
    randomPosition() {
      const x = Math.floor(Math.random() * (this.canvas.width / this.gridSize)) * this.gridSize;
      const y = Math.floor(Math.random() * (this.canvas.height / this.gridSize)) * this.gridSize;
      return { x, y };
    }
  }
};
</script>

<style scoped>
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

canvas {
  display: block;
  margin: 20px auto;
  border: 1px solid black;
}

/* 默认按钮和文字样式 */
button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

button:active {
  background-color: #45a049;
}

.score {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}

/* 针对手机屏幕的优化 */
@media (max-width: 768px) {
  canvas {
    width: 90%;
    height: auto;
    max-width: 300px;
  }
  button {
    width: 80%;
    font-size: 16px;
    padding: 10px;
  }
  .score {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  canvas {
    width: 100%;
    height: auto;
    max-width: 280px;
  }
  button {
    width: 90%;
    font-size: 14px;
    padding: 8px;
  }
  .score {
    font-size: 14px;
  }
}
</style>